<!--
    组件说明：
        相关props：
            isShowDialog - 传入一个对象且有属性 value 
-->
<template>
    <el-dialog
    title="请输入设备信息"
    :visible.sync="isShowDialog.value"
    center
    width="40%"
    @close="closeDialog"
    >
        
        <!-- 表单输入 begin -->
        <el-form :model="addData">
            <el-form-item
            v-for="item in form_parameters"
            :key="item.id"
            :label="item.label"
            :prop="item.prop"
            :label-width="formLabelWidth"
            >
                <el-input v-model="addData[item.prop]"></el-input>
            </el-form-item>
        </el-form>
        <!-- 表单输入 end -->

        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="add()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>

// API 
import { addMonitor } from '../../../../Api/leadership/Monitoring'

export default {

    // 传入从 Home.vue 组件中暴露出来的 reload属性
    inject: ["reload"],

    props: {
        isShowDialog: Object
    },

    data() {
        return {

            // 控制表单 label 宽度
            formLabelWidth: "120px",

            // 添加接口参数
            addData: {
                accessToken: "",
                baseId: null,
                baseName: "",
                createBy: "",
                deviceSerial: "",
                monitoringLocation: "",
                statusCode: "",
                validateCode: "",
                videoName: "",
                videoUrl: ""
            },

            // 表单参数
            form_parameters: [
                {
                    label: "身份令牌",
                    prop: "accessToken"
                },
                {
                    label: "基地编号",
                    prop: "baseId"
                },
                {
                    label: "基地名称",
                    prop: "baseName"
                },
                {
                    label: "创建者",
                    prop: "createBy"
                },
                {
                    label: "设备序列号",
                    prop: "deviceSerial"
                },
                {
                    label: "摄像头监控位置",
                    prop: "monitoringLocation"
                },
                {
                    label: "设备使用状态",
                    prop: "statusCode"
                },
                {
                    label: "设备验证码",
                    prop: "validateCode"
                },
                {
                    label: "视频名称",
                    prop: "videoName"
                },
                {
                    label: "视频路径",
                    prop: "videoUrl"
                }
            ]
        }
    },

    methods: {

        // 添加设备
        add() {
            addMonitor(this.addData).then(res => {
                console.log(res);

                if( res.data.flag == true ) {
                    this.reload()

                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '添加失败'
                    })
                }

            })

            this.closeDialog()
        },

        // 关闭弹窗
        closeDialog() {
            this.isShowDialog.value = false
        }
    }
}
</script>

<style>

</style>